<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
	 .box1{
 	width: 600px;
 	background-color: skyblue;
 	/*overflow: 	hidden;*/ /*atuo*/}
 	 .box2{
 	width: 600px;
 	height: 200px;
 	background-color: purple; }
 .son1{
 	width: 150px;
 	height: 100px;
 	background-color: pink; 
 	float: left;}
 	 .son2{
 	width: 300px;
 	height: 100px;
 	background-color: red;
 	float: left; }
/*	<div class="clear"></div>
.clear{clear: both;}*/
/*p:after{content:"456"}*/





/*.clearfix:after{content: ".";
                 display:block;
                 height: :0;
                 visibility: hidden;
                 clear: both;}*/
                /* .clearfix{*zoom:1;}*/
                .clearfix:before,.clearfix:after{content: "";
                 display:table;
           }
                 .clearfix:after{
                 clear: both;}





	</style>

</head>
<body>

	<div class="box1 clearfix">
		<div class="son1"></div>
		<div class="son2"></div>
	
	</div>
	<div class=box2></div>
	<p>123</p>
</body>
</html>